<template>
  <div>
    <div class="icon-text-container">
      <van-icon @click="settingReturn()" name="arrow-left" />
      <span class="text">设置</span>
    </div>
    <van-cell
      is-link
      style="display: flex; align-items: center"
      @click="toPersonInfo()"
    >
      <template #title>
        <div style="display: flex; align-items: center">
          <van-image
            round
            width="2rem"
            height="2rem"
            :src="userInfo.avatar"
            style="margin-right: 1rem"
          />
          <div>
            <div style="font-weight: bold; line-height: 1.2rem">
              {{ userInfo.name }}
            </div>
            <!-- 用户名 -->
            <div style="color: #999; line-height: 1.2rem">
              {{ userInfo.briefIntroduction }}
            </div>
            <!-- 个性签名 -->
          </div>
        </div>
      </template>
    </van-cell>

    <van-cell title="收获地址管理" is-link to="/addressList"></van-cell>
    <van-cell title="账号与安全" is-link></van-cell>
    <div style="height: 10px; background-color: #f7f7f7"></div>
    <!-- 空隙部分，设置灰色背景 -->
    <van-cell title="安全中心" is-link value="安全问题解决与咨询"></van-cell>
    <van-cell title="消息通知管理" is-link value="订单、优惠通知等"></van-cell>
    <van-cell title="通用设置" is-link value="清除缓存、图片质量"></van-cell>
    <van-cell title="桌面小组件" is-link value="管理你的桌面小组件"></van-cell>
    <div style="height: 10px; background-color: #f7f7f7"></div>
    <!-- 空隙部分，设置灰色背景 -->
    <van-cell title="关于饿了么" is-link></van-cell>
    <van-cell title="问题咨询及反馈" is-link></van-cell>
    <van-cell title="个人信息收集清单" is-link></van-cell>
    <van-cell title="第三方收集清单" is-link></van-cell>
    <van-cell title="第三方信息收集清单" is-link></van-cell>
    <van-cell title="规则中心" is-link></van-cell>
    <van-cell title="喜欢我们，打分鼓励" is-link></van-cell>
    <div>
      <!-- <div>
        <van-cell>
          
          <template #title>
            <div style="display: flex; align-items: center;">
              <div>
                <div style=" line-height: 1.2rem;">长辈模式</div>
                <div style="color: #999; line-height: 1.2rem;">开启后使用更简单，查看详情 ></div>
              </div>
            </div>
          </template>
          <template #right-icon>
            
            <van-switch v-model="checked" />
          </template>
        </van-cell>
      </div> -->
      <!-- 退出当前账号 -->
      <van-button type="default" @click="loginOut()">退出当前账号</van-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import http from "../../utils/http";

//数据请求区
const id = localStorage.getItem("userId");
const userInfo = ref({});
const getUserById = async () => {
  try {
    const response = await http.get(`/user/getUserById/${id}`);
    userInfo.value = response.data.data;
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  getUserById();
});

//编程路由区
const router = useRouter();
/* data() {
    return {
      checked: false,  // 控制开关的状态
    };
  }, */
function toPersonInfo() {
  router.push({ path: "/personInfo" });
}
function settingReturn() {
  router.push("/myHome");
}
const loginOut = () => {
  localStorage.removeItem("userId");
  localStorage.removeItem("token");
  router.push("/first");
};
</script>

<style lang="scss" scoped>
//顶头一行的样式
.icon-text-container {
  display: flex;
  align-items: center;
  line-height: 50px;
  /* 调整垂直对齐 */
  font-size: 22px;
  /* 设置整体字体大小，图标和文字都会放大 */
}

//顶头图标与文字间距
.text {
  margin-left: 145px;
  /* 图标和文本之间的间距 */
}
.van-cell {
  --van-cell-border-color: #9e9fa2bd;
}
::v-deep(.van-button) {
  width: 100%;
  border: 0px;
}
</style>